<template>
  <div>
    <SearchAndList>
      <!-- 搜索部分开始 -->
      <template #search>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="设备编号" size="medium">
            <el-input
              v-model="searchForm.innerCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="getVmSearch"
              size="medium"
              icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <!-- 搜索部分结束 -->
      <!-- 列表开始 -->
      <template #list>
        <el-table
          v-loading="loading"
          :data="TypeData.currentPageRecords"
          style="width: 100%"
        >
          <!-- 序号 -->
          <el-table-column
            type="index"
            :index="getIndex"
            label="序号"
            width="80"
          />
          <!-- 设备编号 -->
          <el-table-column prop="innerCode" label="设备编号" />
          <!-- 设备型号 -->
          <el-table-column prop="type.name" label="设备型号"> </el-table-column>
          <!-- 工单状态 -->
          <el-table-column label="详细地址">
            <template v-slot="{ row }">
              <span>{{ row.node.addr.split("-").splice(-1).toString() }}</span>
            </template>
          </el-table-column>
          <!-- 运营人员 -->
          <el-table-column prop="userName" label="运营状态">
            <template v-slot="{ row }">
              <span>{{
                row.vmStatus ? (row.vmStatus === 1 ? "运营" : "撤机") : "未投放"
              }}</span>
            </template>
          </el-table-column>
          <!-- 创建时间 -->
          <el-table-column prop="status" label="设备状态">
            <template v-slot="{ row }">
              <el-tag effect="dark" :class="{ color: !row.status[10001] }">
                离线
              </el-tag>
              <el-tag effect="dark" :class="{ color: !row.status[10002] }">
                货道
              </el-tag>
              <el-tag effect="dark" :class="{ color: !row.status[10003] }">
                传动轴
              </el-tag>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="detail(scope.row.innerCode)"
                type="text"
                size="small"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 列表结束 -->
      <!-- 底部分页开始 -->
      <template #bottom>
        <el-pagination
          @current-change="paginaTion"
          layout="slot, prev, next"
          :page-size="10"
          :total="getTotalCount"
          prev-text="上一页"
          next-text="下一页"
          background
        >
          <template>
            <div class="str">
              共{{ TypeData.totalCount }}条记录&nbsp;&nbsp;第
              {{ TypeData.pageIndex }}/{{ TypeData.totalPage }} 页
            </div>
          </template>
        </el-pagination>
      </template>
      <!-- 底部分页结束 -->
    </SearchAndList>
    <el-dialog
      title="设备详情"
      style="font-size: 16px"
      :visible.sync="dialogVisible"
      width="590px"
    >
      <div class="top">
        <ul>
          <li>销售量： <span>{{ dialogsale.ordercount }}个</span></li>
          <li>销售额： <span>{{ dialogsale.orderamount }}元</span></li>
          <li>补货次数： <span>{{ dialogsale.supplycount }}次</span></li>
          <li>维修次数： <span>{{ dialogsale.requircount }}次</span></li>
        </ul>
      </div>
      <span>
        <p>商品销量（月）</p>
        <div v-if="dialogsale.skucollect.length">
          <table>
            <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="dialog-footer" slot="footer">
          当前设备未销售商品
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getQueryTime } from '@/utils/tool'
import { getVmSearchManager, getTypeOrderCount, getTypeOrderAmount, getTypeSupplyCount, getTypeRequirCount, getTypeSkucollect } from '@/api/Equipment'
import SearchAndList from '@/components/SearchAndList.vue'
export default {
  components: { SearchAndList },
  data () {
    return {
      // 加载状态
      loading: false,
      // 设备搜索框
      searchForm: {
        innerCode: ''
      },
      // 获取的设备数据
      TypeData: {
        currentPageRecords: [],
        totalCount: undefined,
        totalPage: 1,
        pageIndex: 1,
        pageSize: 10
      },
      dialogsale: {
        ordercount: '', // 订单总数
        orderamount: '', // 收入
        supplycount: '', // 补货次数
        requircount: '', // 维修次数
        skucollect: [] // 商品销量
      },
      dialogVisible: false
    }
  },
  created () {
    this.getVmSearch()
  },
  methods: {
    async getVmSearch () {
      this.loading = true
      this.searchForm.pageIndex = this.TypeData.pageIndex
      this.searchForm.pageSize = this.TypeData.pageSize
      const { data } = await getVmSearchManager(this.searchForm)
      this.TypeData = data
      // console.log(this.TypeData)
      this.loading = false
    },
    async detail (innerCode) {
      this.dialogVisible = true
      // 获取月初时间
      const time = await getQueryTime()
      // console.log(time)
      const timeYear = {
        start: time.start.substring(0, 10),
        end: time.end.substring(0, 10)
      }
      // console.log(timeYear)
      // 订单总数
      const { data: ordercount } = await getTypeOrderCount({ ...time, innerCode })
      this.dialogsale.ordercount = ordercount
      // 收入
      const { data: orderamount } = await getTypeOrderAmount({ ...time, innerCode })
      this.dialogsale.orderamount = orderamount
      // 补货次数
      const { data: supplycount } = await getTypeSupplyCount({ ...timeYear, innerCode })
      this.dialogsale.supplycount = supplycount
      // 维修次数
      const { data: requircount } = await getTypeRequirCount({ ...timeYear, innerCode })
      this.dialogsale.requircount = requircount
      // 商品销量
      const { data: skucollect } = await getTypeSkucollect({ ...timeYear, innerCode })
      this.dialogsale.skucollect = skucollect
    },
    // 自定义索引
    getIndex (index) {
      if (this.TypeData.pageIndex === '1') {
        return index + 1
      } else {
        return index + 10 * (this.TypeData.pageIndex - 1) + 1
      }
    },
    // 点击分页 页面数据变化
    paginaTion (res) {
      if (!this.loading) {
        if (res > this.TypeData.pageIndex) {
          this.TypeData.pageIndex++
          // 重新获取数据
          this.getVmSearch()
        } else {
          this.TypeData.pageIndex--
          this.getVmSearch()
        }
      }
    }
  },
  computed: {
    getTotalCount () {
      return +this.TypeData.totalCount
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  font-size: 14px;
  color: #666;
  .el-dialog__title {
    font-size: 16px;
  }
  .top  {
    display: flex;
    margin: 0 auto;
    height: 54px;
    line-height: 30px;
    background-color: rgba(227, 233, 245, 0.39);
    ul {
      display: flex;
      width: 500px;
    }
    li {
      float: left;
      list-style: none;
      margin: 0 auto;
      flex: 1;
      span {
        height: 20px;
        line-height: 20px;
        color: #5f84ff;
        font-size: 13px;
      }
    }
  }
  span {
    table {
      margin-left: 10px;
      tr {
        width: 500px;
        display: flex;
        td {
        flex: 1;
        }
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
  }
}

.el-tag {
  background: linear-gradient(135deg, #3fc997, #4bda98);
  height: 25px;
  border: 0px;
  border-radius: 25px;
  text-align: center;
  line-height: 25px;
  margin-left: 10px;
}
.color {
  background: linear-gradient(135deg, #ffb043, #ffc020);
}
</style>
